Spread.Viewsでは、カスタム行テンプレートを使用して、行の外観をカスタマイズできます。テンプレートでは単一のIDを使用して、子要素の絶対位置を定義します。子要素の絶対位置により、親行が影響を受けることはありません。
カスタムテンプレートを使用して行の外観を修正するには、次の手順を実行します。
サンプルコード
- HTML書式を使用して、データ行を表示する行テンプレートを定義します。
<div id="grid1" style="height:100%"></div><template id="rowTmpl" style="display: none" type="text/dataView-template"> <div style='height:100%;'> <div class="gc-cell gc-cell-border" style='display:inline-block;vertical-align:top;width:80px;height:100px;line-height:100px;text-align:center' data-column='id' data-taborder='0'></div> <div style='display: inline-block;vertical-align:top;height:100%;' data-column-group> <div style='height:33px; line-height:33px;' data-column-group> <div class="gc-cell gc-cell-border" style='display: inline-block; width:200px;height:100%;line-height: 33px' data-column='name' data-taborder='1'></div> <div class="gc-cell gc-cell-border" style='display: inline-block; width:187px;height:100%;line-height: 33px' data-column='sku' data-taborder='2'></div> </div> <div style='height:34px;line-height: 34px;' data-column-group> <div class="gc-cell gc-cell-border" style='display: inline-block;line-height: 34px; height:100%;width:200px;' data-column='quantityPerUnit' data-taborder='3'></div> <div class="gc-cell gc-cell-border" style='display: inline-block;line-height: 34px; height:100%;width:187px;text-align:left' data-column='price' data-taborder='4'></div> </div> <div class="gc-cell gc-cell-border" style='height:33px;line-height: 33px;width:387px' data-column='description' data-taborder='5'></div> </div> <div style='display: inline-block;vertical-align:top;height:100%;' data-column-group> <div class="gc-cell gc-cell-border" style='height:33px;line-height: 33px;width:120px;text-align:center' data-column='inStock' data-taborder='6'></div> <div class="gc-cell gc-cell-border" style='height:34px;line-height: 34px;width:120px;text-align:center' data-column='reorderLevel' data-taborder='7'></div> <div class="gc-cell gc-cell-border" style='height:33px;line-height: 33px;width:120px;text-align:center' data-column='unitsOnOrder' data-taborder='8'></div> </div> <div style='display: inline-block;vertical-align:top;height:100%;' data-column-group> <div class="gc-cell gc-cell-border" style='height:33px;line-height: 33px;width:200px;' data-column='supplier' data-taborder='9'></div> <div class="gc-cell gc-cell-border" style='height:34px;line-height: 34px;width:200px;' data-column='location' data-taborder='10'></div> <div class="gc-cell gc-cell-border" style='height:33px;line-height: 33px;width:200px;' data-column='telephone' data-taborder='11'></div> </div> <div class="gc-cell gc-cell-border" style='display: inline-block;vertical-align:top;height:100px;line-height:100px;width:100px;text-align:center' data-column='discontinued' data-taborder='12'></div> </div> - テンプレートタグ構造を定義した後、列定義を追加します。
var colFormatter = '<span>{{? it.discontinued}}?{{??}}?{{?}}</span>'; var columns = [{ id: 'id', caption: 'Product ID', dataField: 'ProductID' }, { id: 'name', caption: 'Name', dataField: 'ProductName' }, { id: 'sku', caption: 'Category', dataField: 'Category.CategoryName' }, { id: 'description', caption: 'Description', dataField: 'Category.Description' }, { id: 'quantityPerUnit', caption: 'Quantity Per Unit', dataField: 'QuantityPerUnit' }, { id: 'inStock', caption: 'In Stock', dataField: 'UnitsInStock' }, { id: 'price', caption: 'Unit Price', dataField: 'UnitPrice' }, { id: 'discontinued', caption: 'Discontinued', dataField: 'Discontinued', presenter: colFormatter }, { id: 'reorderLevel', caption: 'Reorder Level', dataField: 'ReorderLevel' }, { id: 'unitsOnOrder', caption: 'Units on order', dataField: 'UnitsOnOrder' }, { id: 'supplier', caption: 'Supplier', dataField: 'Supplier.CompanyName' }, { id: 'location', caption: 'Address', dataField: 'Supplier.Address' }, { id: 'telephone', caption: 'Telephone', dataField: 'Supplier.Telephone' }]; - DIVタグのグリッドIDを呼び出してコードを初期化し、行テンプレートIDを呼び出します。
var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({ rowHeight: 100, colHeaderHeight: 100, rowTemplate: '#rowTmpl' }));